<template>
  <el-config-provider :locale="zhCn">
    <div class="app-container">
      <router-view></router-view>
    </div>
  </el-config-provider>
</template>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#app {
  width: 100%;
  height: 100%;
}

.app-container {
  width: 100%;
  height: 100%;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

/* 暗黑模式自定义变量 */
html.dark {
  /* 主背景色 */
  --el-bg-color: #141414;
  --el-bg-color-overlay: #1d1e1f;
  
  /* 文字颜色 */
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  --el-text-color-secondary: #a3a6ad;
  
  /* 边框颜色 */
  --el-border-color: #363637;
  --el-border-color-light: #363637;
  --el-border-color-lighter: #414243;
  
  /* 填充色 */
  --el-fill-color: #1d1e1f;
  --el-fill-color-light: #262727;
  --el-fill-color-lighter: #2b2b2c;
  --el-fill-color-blank: #000000;
  
  /* 主题色 */
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #3375b9;
  --el-color-primary-light-5: #2a598a;
  --el-color-primary-light-7: #213d5b;
  --el-color-primary-light-8: #1d3043;
  --el-color-primary-light-9: #18222c;
  
  /* 遮罩颜色 */
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
}
</style> 